<template>
  <div class="collapse-box">
    <van-collapse v-model="activeNames" v-for="(item, i) in data" :key="i">
      <van-collapse-item :name="i + 1">
        <template #title>
          <div class="base-collapse__title">
            <span class="base-collapse__title__state">
              <img src="@img/kc.png" width="40" height="40"
            /></span>
            <div class="title">
              <span>{{ item.label }}</span>
              <span class="time">{{ item.time }}</span>
            </div>
          </div>
        </template>
        <div class="nr-box">
          <div class="item" v-for="(item1, ii) in item.list" :key="ii">
            <span>{{ item1.title }}</span>
            <van-rate v-model="item1.rate" color="#FFA940" size="12px" />
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
  },
  data() {
    return {
      activeNames: ["1"],
      value: 3,
    };
  },
};
</script>

<style lang="scss" scoped>
.collapse-box {
  ::v-deep(.base-collapse__title) {
    display: flex;
  }
  ::v-deep(.base-collapse__title .title) {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #272b2d;
    margin-left: 10px;
  }
  ::v-deep(.base-collapse__title .title span) {
    display: block;
  }
  ::v-deep(.base-collapse__title .title .time) {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #676b6b;
  }
  ::v-deep(.van-hairline--top-bottom:after) {
    border: none;
  }
  .nr-box {
    background: #f5f7f9;
    border-radius: 4px;
    padding: 15px 14px;
    .item {
      display: flex;
      margin-bottom: 20px;
      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #272b2d;
        flex: 1;
      }
    }
    .item:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
